BootstrapVue — Popovers and Progress Bars

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

We look at how to customize popovers and add progress bars.

Hiding and Showing Popovers

We can open and hide popovers the way that we want to show them with the this.$root.emit method.

The method lets us emit events globally and so it can be used to open more than one popover.

For example, we can write:

<template>
  <div id="app" class="text-center">
    <b-button v-b-popover.hover.top="'Popover 1'" title="Title 1">Button 1</b-button>
    <b-button v-b-popover.hover.top="'Popover 2'" title="Title 2">Button 2</b-button>
    <b-button @click='showAll'>Show All</b-button>
  </div>
</template>

<script>
export default {
  methods: {
    showAll() {
      this.$root.$emit("bv::show::popover");
    }
  }
};
</script>

<style>
#app {
  margin: 200px;
}
</style>

We have 2 buttons with popovers.

And we have the Show All button.

We have the showAll method to emit the 'bv::show::popover' event to show all popovers.

Also, we can write:

<template>
  <div id="app" class="text-center">
    <b-button id="popover-1" v-b-popover.hover.top="'Popover 1'" title="Title 1">Button 1</b-button>
    <b-button v-b-popover.hover.top="'Popover 2'" title="Title 2">Button 2</b-button>
    <b-button @click="showOne">Show 1</b-button>
  </div>
</template>

<script>
export default {
  methods: {
    showOne() {
      this.$root.$emit("bv::show::popover", "popover-1");
    }
  }
};
</script>

<style>
#app {
  margin: 200px;
}
</style>

We have the showOne method with 'popover-1' as the second argument.

This is the ID of the popover we want to open.

Now when we click the Show 1 button, we see the first popover open.

Likewise, there is the bv::hide::popover to hide the popover.

There’s the bv::disable::popover to disable them so they can’t be opened.

And there is bv::enable::popover to enable them so they can be opened.

We can listen to these events with this.$root.$on .

For example, we can write:

export default {
  mounted() {
    this.$root.$on('bv::popover::show', bvEventObj => {
      console.log('bvEventObj:', bvEventObj)
    })
  }
}

The callback will be run when those events are triggered.

Progress

BootstrapVue provides us with the progress component to let us display the progress of something.

To add one, we can use the b-progress and the b-progress-bar components.

For example, we can write:

<template>
  <div id="app">
    <b-progress class="mt-2" :max="max" show-value>
      <b-progress-bar :value="value * (6 / 10)" variant="success"></b-progress-bar>
      <b-progress-bar :value="value * (2.5 / 10)" variant="warning"></b-progress-bar>
      <b-progress-bar :value="value * (1.5 / 10)" variant="danger"></b-progress-bar>
    </b-progress>

<b-button class="mt-3" @click="randomValue">random number</b-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      max: 100,
      value: 0
    };
  },
  methods: {
    randomValue() {
      this.value = Math.random() * this.max;
    }
  }
};
</script>

We have the b-progress component which houses the b-progress-bar component.

We can have bar with multiple values.

In the example above, we have 6 / 10 of it being green with because of the variant is set to 'success' .

Then a quarter of the bar is yellow since we the variant to warning in the 2nd b-progress-bar .

Then we have 15% of it being red since variant is set to danger in the 3rd bar.

The value determines the portion of the bar that’s filled.

max is the maximum value.

show-value indicates whether we want to show the value or not.

Labels

We can use the show-progress to show the percentage of the max value.

Or we can use the show-value props to show the current absolute value.

For example, we can write:

<template>
  <div id="app">
    <b-progress show-value :value="value" :max="max"></b-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      max: 100,
      value: 75
    };
  }
};
</script>

Then we see the absolute value in the progress bar.

Custom Progress Label

We can customize the progress label the way we like.

For example, we can write:

<template>
  <div id="app">
    <b-progress :value="value" :max="max" height="2rem">
      <b-progress-bar :value="value">
        <strong>{{ value.toFixed(2) }} / {{ max }}</strong>
      </b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      max: 100,
      value: 75
    };
  }
};
</script>

We have b-progress-bar which takes the value and round it to 2 decimal places.

We also take the max value and display it after it.

Conclusion

Popovers can be shown, hidden, enabled, or disabled by emitting events.

Also, we can create progress bars with the b-progress-bar components.